import React, { useContext } from 'react'
import { Text, View, Button, Alert } from 'react-native'
import { NavigationContainer } from "@react-navigation/native";
// import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome'; // 引入图标库
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

import { AuthProvider, AuthContext } from './components/AuthContext.js';

import Home from './pages/home.jsx';
import Book from './pages/book.jsx';
import My from './pages/my.jsx';
import Shelf from './pages/shelf.jsx'
import Category from './pages/category.jsx';
import ProfileEditScreen from './pages/profileEdit';
import { DarkModeProvider } from './pages/darkModeContext.jsx';

const Tab = createBottomTabNavigator();
// const Stack = createNativeStackNavigator();

function AppInner() {
    const ctx = useContext(AuthContext);
    console.log('AuthContext value:', ctx);
    const { userToken } = ctx || {};

    return (
        <NavigationContainer>
            <Tab.Navigator
                screenOptions={({ route }) => ({
                    tabBarStyle: {
                        display: (() => {
                            // 获取当前堆栈路由名称
                            const routeName = getFocusedRouteNameFromRoute(route) || '';
                            // 需要隐藏TabBar的页面列表
                            const hideOnScreens = ['BookContent', 'BookReading', 'LoginPage', 'ResetPassword'];
                            return hideOnScreens.includes(routeName) ? 'none' : 'flex'; // 根据路由名称判断是否隐藏TabBar
                        })()
                    }
                })}
            >
                <Tab.Screen name="Home" component={Home}
                    options={{
                        tabBarLabel: '首页',
                        headerShown: false,
                        tabBarIcon: ({ color, size }) => (
                            <Icon name="home" color={color} size={size} /> // 修改图标
                        ),
                    }}
                />
                <Tab.Screen name="Ca" component={Category}
                    options={{
                        tabBarLabel: '分类',
                        headerShown: false,
                        tabBarIcon: ({ color, size }) => (
                            <Icon name="th-large" color={color} size={size} /> // 修改图标
                        ),
                    }}
                />

                {/* <Tab.Screen name="Book" component={Book} 
                    options={({ route }) => ({
                        tabBarLabel: '书架',
                        headerShown: false,
                        tabBarIcon: ({ color, size }) => (
                            <Icon name="book" color={color} size={size} />
                        ),
                        // 添加路由检测逻辑
                        tabBarStyle: { 
                            display: (() => {
                                const routeName = getFocusedRouteNameFromRoute(route);
                                return routeName === 'BookMain' ? 'flex' : 'none';
                            })() 
                        }
                    })}
                /> */}

                <Tab.Screen name="Shelf" component={Shelf}
                    options={{
                        tabBarLabel: '书架',
                        headerShown: false,
                        tabBarIcon: ({ color, size }) => (
                            <Icon name="book" color={color} size={size} />
                        ),
                    }}
                    listeners={({ navigation }) => ({
                        tabPress: (e) => {
                            if (!userToken) {
                                e.preventDefault();
                                Alert.alert(
                                    '未登录',
                                    '您还未登录，是否前往登录？',
                                    [
                                        { text: '否', style: 'cancel' },
                                        {
                                            text: '是',
                                            onPress: () => navigation.navigate('My', { screen: 'LoginPage' }),
                                        },
                                    ],
                                    { cancelable: true }
                                );
                            }
                        },
                    })}
                />

                <Tab.Screen name="My" component={My}
                    options={{
                        tabBarLabel: '我的',
                        headerShown: false,
                        tabBarIcon: ({ color, size }) => (
                            <Icon name="user" color={color} size={size} /> // 修改图标
                        ),
                    }}
                />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

export default function App() {
    return (
        <AuthProvider>
            <AppInner />
        </AuthProvider>
        
    );
}

// 底部导航栏(主路由tab)-->页面跳转(子路由stack)
// 主路由实现底部导航栏，处理主页与个人页等其他主页面的切换
// 子路由实现页面内子页面功能跳转
// 现内容仅为示例
// 建议组件化


//book导航弃用，由shelf导航实现，"书架制作_shelfPages_0.1"